@import url('./form.css');
@import url('./border-box.css');
@import url('./dialog.css');

html {
  color: var(--vscode-editor-foreground);
  background-color: var(--vscode-editor-background);
}
html, body {
  margin: 0;
  padding: 0;
}
body {
  --color0: var(--color0-red), var(--color0-green), var(--color0-blue);
  --true-color0: rgba(var(--color0), var(--color0-alpha));
  
  --color1: var(--color1-red), var(--color1-green), var(--color1-blue);
  --true-color1: rgba(var(--color1), var(--color1-alpha));

  --color2: var(--color2-red), var(--color2-green), var(--color2-blue);
  --true-color2: rgba(var(--color2), var(--color2-alpha));

  --border1-50: 1px solid rgba(var(--color1), .5);
  --border1-18: 1px solid rgba(var(--color1), .18);
  --border1-08: 1px solid rgba(var(--color1), .08);
  --border-focus: 1px solid var(--vscode-focusBorder);
  --border-radius: .25rem;
  --box-shadow: 0 0 8px 2px rgb(0 0 0 / 18%);
  line-height: 1;
}

button {
  outline: none;
  border: none;
  background-color: var(--vscode-button-background);
  color: var(--vscode-button-foreground);
  border-radius: 1px;
  
  font-size: .95em;
  display: inline-block;
  height: 2em;
  min-width: 6em;
  padding: 0 1em;
}
button:not([disabled]):hover {
  background-color: var(--vscode-button-hoverBackground);
}
button[disabled] {
  opacity: .5;
  cursor: default;
}

table.ppz {
  border: 1px solid rgba(var(--color1), .06);
  border-top: none;
  border-collapse: collapse;
}
table.ppz thead tr {
  background: rgba(var(--color1), .1);
}
table.ppz tr:nth-child(2n) {
  background: rgba(var(--color1), .06);
}
table.ppz th, table.ppz td {
  padding: .3em .6em;
  line-height: 1.5em;
  text-align: left;
  max-width: 10em;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.ppz tbody th:hover, table.ppz tbody td:hover {
  background-color: rgba(var(--color1), .1);
}
table.ppz tbody th:focus, table.ppz tbody td:focus {
  background-color: rgba(var(--color1), .1);
  white-space: initial;
}

.flex-container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.filler {
  width: 1em;
  height: 1em;
}

/** iconfont **/
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

/* 动画 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
}
